
{% extends 'visites/include/base.html' %}
{% load staticfiles %}
{% block content %}
  <div class="row orders">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#unfinished-panel" role="tab" id="unfinished">待收货</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#finished-panel" role="tab" id="finished">已完成</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#unpaid-panel" role="tab" id="unpaid">待付款</a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active p-3" id="unfinished-panel" role="tabpanel">
                                {% for Orders_0 in orderList_0 %}
                                <table class="table order-list">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>名称</th>
                                        <th>数量</th>
                                        <th>单价</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        {% for menus_0 in Orders_0.menus %}
                                            <tr>
                                                <td><img src="../../{{ menus_0.pic_url }}"></td>
                                                <td><b>{{ menus_0.name }}</b></td>
                                                <td>×{{ menus_0.amount }}</td>
                                                <td>￥{{ menus_0.price }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                    <ul style="background-color: #f9f7f7;width: 100%;list-style: none;word-spacing: 2em;padding: 20px 30px">
                                    <li style="line-height: 2em">服务社区：{{ Orders_0.community }}</li>
                                    <li style="line-height: 2em">配送点：{{ Orders_0.point }}</li>
                                    <li style="line-height: 2em">付款时间：{{ Orders_0.time_end }}</li>
                                    <li style="line-height: 2em">订单号：{{ Orders_0.order_num }}</li>
                                    <li style="line-height: 2em">订单金额：￥{{ Orders_0.payment }}
                                        <a class="btn btn-info none-radius href_detail" href="/order/orderdetail?id={{ Orders_0.id }}" data-order_0_id="{{ Orders_0.id }}" style="float: right;">订单详情</a>
                                    </li>
                                    </ul>
                                {% endfor %}
                                <div class="row order-page">
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            {% if orderList_0.has_previous%}
                                            <li class="page-item">
                                                <a class="page-link" href="?type=0&id={{ user_id }}&page_0={{ orderList_0.previous_page_number }}" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                    <span class="sr-only">Previous</span>
                                                </a>
                                            </li>
                                            {% endif %}
{#                                            如果orderList_0有上一页，则显示 上一页箭头且修改链接地址#}
                                            {% for pg_0 in orderList_0.paginator.page_range %}
{#                                                生成导航标签页码#}
                                                {% if  orderList_0.number == pg_0 %}
{#                                                    将view传来的页码导航高亮#}
                                                    <li class="page-item active"><a class="page-link" href="?type=0&page_0={{ pg_0 }}">{{ pg_0 }}</a></li>
                                                    {% else %}
                                                    <li><a class="page-link" href="?type=0&id={{ user_id }}&page_0={{ pg_0 }}">{{ pg_0 }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                            {% if orderList_0.has_next %}
                                                 <li>
                                                    <a class="page-link" href="?type=0&id={{ user_id }}&page_0={{ orderList_0.next_page_number }}" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                    <span class="sr-only">Next</span>
                                                    </a>
                                                 </li>
                                            {% endif %}
{#                                            如果orderList_0有下一页，则显示下一页箭头且修改链接地址#}
                                        </ul>
                                    </nav>
                                </div>

                            </div>
                            <div class="tab-pane p-3" id="finished-panel" role="tabpanel">
                                {% for Orders_1 in orderList_1 %}
                                <table class="table order-list">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>名称</th>
                                        <th>数量</th>
                                        <th>单价</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        {% for menus_1 in Orders_1.menus %}
                                            <tr>
                                                <td><img src="../../{{ menus_1.pic_url }}"></td>
                                                <td><b>{{ menus_1.name }}</b></td>
                                                <td>×{{ menus_1.amount }}</td>
                                                <td>￥{{ menus_1.price }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                 <ul style="background-color: #f9f7f7;width: 100%;list-style: none;word-spacing: 2em;padding: 20px 30px">
                                    <li style="line-height: 2em">服务社区：{{ Orders_1.community }}</li>
                                    <li style="line-height: 2em">配送点：{{ Orders_1.point }}</li>
                                    <li style="line-height: 2em">付款时间：{{ Orders_1.time_end }}</li>
                                    <li style="line-height: 2em">订单号：{{ Orders_1.order_num }}</li>
                                    <li style="line-height: 2em">订单金额：￥{{ Orders_1.payment }}
                                        <a class="btn btn-info none-radius href_detail" href="/order/orderdetail?id={{ Orders_1.id }}" data-order_1_id="{{ Orders_1.id }}" style="float: right;">订单详情</a>
                                    </li>
                                    </ul>
                                {% endfor %}
                                <div class="row order-page">
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            {% if orderList_1.has_previous%}
                                            <li class="page-item">
                                                <a class="page-link" href="?type=1&id={{ user_id }}&page_1={{ orderList_1.previous_page_number }}" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                    <span class="sr-only">Previous</span>
                                                </a>
                                            </li>
                                            {% endif %}
{#                                            如果orderList_0有上一页，则显示 上一页箭头且修改链接地址#}
                                            {% for pg_1 in orderList_1.paginator.page_range %}
{#                                                生成导航标签页码#}
                                                {% if  orderList_1.number == pg_1 %}
{#                                                    将view传来的页码导航高亮#}
                                                    <li class="page-item active"><a class="page-link" href="?type=1&page_1={{ pg_1 }}" onclick="tabShow()">{{ pg_1 }}</a></li>
                                                    {% else %}
                                                    <li><a class="page-link" href="?type=1&id={{ user_id }}&page_1={{ pg_1 }}">{{ pg_1 }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                            {% if orderList_1.has_next %}
                                                 <li>
                                                    <a class="page-link" href="?type=1&id={{ user_id }}&page_1={{ orderList_1.next_page_number }}" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                    <span class="sr-only">Next</span>
                                                    </a>
                                                 </li>
                                            {% endif %}
{#                                            如果orderList_0有下一页，则显示下一页箭头且修改链接地址#}
                                        </ul>
                                    </nav>
                                </div>

                            </div>
                            <div class="tab-pane p-3" id="unpaid-panel" role="tabpanel">
                                {% for Orders_2 in orderList_2 %}
                                <table class="table order-list">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>名称</th>
                                        <th>数量</th>
                                        <th>单价</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        {% for menus_2 in Orders_2.menus %}
                                            <tr>
                                                <td><img src="../../{{ menus_2.pic_url }}"></td>
                                                <td><b>{{ menus_2.name }}</b></td>
                                                <td>×{{ menus_2.amount }}</td>
                                                <td>￥{{ menus_2.price }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                 <ul style="background-color: #f9f7f7;width: 100%;list-style: none;word-spacing: 2em;padding: 20px 30px">
                                    <li style="line-height: 2em">服务社区：{{ Orders_2.community }}</li>
                                    <li style="line-height: 2em">配送点：{{ Orders_2.point }}</li>
{#                                    <li style="line-height: 2em">付款时间：{{ Orders_2.time_end }}</li>#}
                                    <li style="line-height: 2em">订单号：{{ Orders_2.order_num }}</li>
                                    <li style="line-height: 2em">订单金额：￥{{ Orders_2.payment }}
                                        <a class="btn btn-info none-radius href_detail" href="/order/orderdetail?id={{ Orders_2.id }}" data-order_1_id="{{ Orders_2.id }}" style="float: right;">订单详情</a>
                                    </li>
                                    </ul>
                                {% endfor %}
                                <div class="row order-page">
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            {% if orderList_2.has_previous%}
                                            <li class="page-item">
                                                <a class="page-link" href="?type=2&id={{ user_id }}&page_2={{ orderList_2.previous_page_number }}" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                    <span class="sr-only">Previous</span>
                                                </a>
                                            </li>
                                            {% endif %}
{#                                            如果orderList_0有上一页，则显示 上一页箭头且修改链接地址#}
                                            {% for pg_2 in orderList_2.paginator.page_range %}
{#                                                生成导航标签页码#}
                                                {% if  orderList_2.number == pg_2 %}
{#                                                    将view传来的页码导航高亮#}
                                                    <li class="page-item active"><a class="page-link" href="?type=2&page_2={{ pg_2 }}" onclick="tabShow()">{{ pg_2 }}</a></li>
                                                    {% else %}
                                                    <li><a class="page-link" href="?type=2&id={{ user_id }}&page_2={{ pg_2 }}">{{ pg_2 }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                            {% if orderList_2.has_next %}
                                                 <li>
                                                    <a class="page-link" href="?type=2&id={{ user_id }}&page_2={{ orderList_2.next_page_number }}" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                    <span class="sr-only">Next</span>
                                                    </a>
                                                 </li>
                                            {% endif %}
{#                                            如果orderList_0有下一页，则显示下一页箭头且修改链接地址#}
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
    <script src="{% static '/visites/js/jquery.min.js' %}"></script>
    <script type="text/javascript">

    $(document).ready(function () {
        var a ={{ type }};
        if (a == 1){
            document.getElementById('finished').classList.add('active');
            document.getElementById('finished-panel').classList.add('active');
            document.getElementById('unfinished').classList.remove('active');
            document.getElementById('unfinished-panel').classList.remove('active');
            document.getElementById('unpaid').classList.remove('active');
            document.getElementById('unpaid-panel').classList.remove('active');
        }else if (a == 2){
            document.getElementById('finished').classList.remove('active');
            document.getElementById('finished-panel').classList.remove('active');
            document.getElementById('unfinished').classList.remove('active');
            document.getElementById('unfinished-panel').classList.remove('active');
            document.getElementById('unpaid').classList.add('active');
            document.getElementById('unpaid-panel').classList.add('active');
        } else {
            document.getElementById('finished').classList.remove('active');
            document.getElementById('finished-panel').classList.remove('active');
            document.getElementById('unfinished').classList.add('active');
            document.getElementById('unfinished-panel').classList.add('active');
            document.getElementById('unpaid').classList.remove('active');
            document.getElementById('unpaid-panel').classList.remove('active');
        }

        $(".href_detail").click(function () {
            var order_0_id = $(this).attr("data-order_0_id");
            var order_1_id = $(this).attr("data-order_1_id");
        })
    })
    </script>

{% endblock %}
